/**
 * 物联控制
 * @author xiaoxujs
 */

import { useCallback, useEffect, useState } from "react";
// import { IBaseBarrierConfigList } from "../../../type/wulian";
import VideoBox from "./components/VideoBox";
import XinxiBox from "./components/XinxiBox";
import { WuliankongzhiBox } from "./style";
import { getBaseBarrierConfigGetIsStart, getBaseBarrierConfigIsStop, getBaseBarrierConfigList } from "../api";
import { message, Switch } from "antd";
import { IBaseBarrierConfigList } from "../../../type/wulian";

const Wuliankongzhi = () => {
    const [ruPeizhi, setRuPeizhi] = useState<IBaseBarrierConfigList>(); // 入矿闸道配置
    const [chuPeizhi, setChuPeizhi] = useState<IBaseBarrierConfigList>(); // 出矿闸道配置
    const [lsIsStart, setLsIsStart] = useState(false); // 装车流程是否开启
    const [kaiguanLoading, setKaiguanLoading] = useState(false); // 开启/关闭装车流程loading

    const kauguanFun = useCallback(
      async () => {
        // 0 开启 1 关闭
       const {code, msg, data} = await getBaseBarrierConfigGetIsStart() as {code: number, msg: string, data: 0 | 1};
       if(code === 20000) {
            setLsIsStart(data === 0)
        }else{
            message.error(msg);
        }


      },
      [],
    )
    useEffect(() => {
      kauguanFun()
    
      return () => {
        
      }
    }, [kauguanFun])
    
    

    const ruChuFun = useCallback(
      async () => {
        const {code, msg, data} = await getBaseBarrierConfigList() as {code: number, msg: string, data: IBaseBarrierConfigList[]};
        if(code === 20000) {
            data.forEach(element => {
                if(element.barrierName === '入口') {
                    setRuPeizhi(element)
                }else if(element.barrierName === '出口') {
                    setChuPeizhi(element)
                }
            });
        }else{
            message.error(msg);
        }
      },
      [],
    )
    useEffect(() => {
        ruChuFun()
    
      return () => {
        
      }
    }, [ruChuFun])
    
    
    const handleChangeKaiguan = async () => {
        setKaiguanLoading(true);
        const {code, msg} = await getBaseBarrierConfigIsStop({type: lsIsStart ? 1 : 0}) as {code: number, msg: string};
        if(code === 20000) {
            message.success('操作成功');
            kauguanFun();
        } else {
            message.error(msg)
        }
        setKaiguanLoading(false);
    }

    return <WuliankongzhiBox>
                           启用状态: <Switch loading={kaiguanLoading} checkedChildren="开启" unCheckedChildren="关闭" checked={lsIsStart} onChange={() => handleChangeKaiguan()} />
        
        <div className="video_box">
            <VideoBox title="入矿监控" data = {ruPeizhi} />
             <VideoBox title="出矿监控" data = {chuPeizhi} />
        </div>
        <div className="xinxi_box">
            <XinxiBox data = {ruPeizhi} ruChuFun = {ruChuFun} isChu={false} />
            <XinxiBox data = {chuPeizhi} ruChuFun = {ruChuFun} isChu={true} />
        </div>
    </WuliankongzhiBox>
}

export default Wuliankongzhi;